/**
 * Created by xiaomagege on 2019/1/8.
 */
// manage
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Input,Button ,Modal,Row,Col,message,Select,Popconfirm,Divider,Pagination,DatePicker,TreeSelect} from 'antd';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
import styles from './index.less';
const Option = Select.Option;
import {TimeSpan} from '../../utils';
import moment from 'moment';
import { arrayToTree } from 'utils';
let obj ={
    '1':'自然灾害',
    '2':'事故灾难',
    '3':'公共卫生',
    '4':'社区安全',
};
const dateFormat = 'YYYY/MM/DD';
const Pages = ({ manage, dispatch, loading }) => {
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
        },
        {
            title: '类别',
            dataIndex: 'category',
            render:text => obj[text],
        },
        {
            title: '可能灾害形式',
            dataIndex: 'disaster_form',
            // render:text => text && text == '1'?'检查/实验':text == '2'?"补充":"使用",
        },
        {
            title: '排查时间',
            dataIndex: 'create_time',
            render:text => TimeSpan(text),
        },
        {
            title: '影响范围',
            dataIndex: 'scope',
        },
        {
            title: '责任单位',
            dataIndex: 'department_name',
        },
        {
            title: '上级监管部门',
            dataIndex: 'sup_department',
        },
        {
            title: '联系人',
            dataIndex: 'user_name',
        },
        {
            title: '操作',
            dataIndex: 'option',
            render: (text,record) =><div>
                <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={
                    ()=> dispatch({type:"manage/deleteManage",payload:{id:record.id}})
                } okText="是" cancelText="否">
                    <a style={{color:"red"}}>删除</a>
                </Popconfirm>
                <Divider type="vertical" />
                <a onClick={()=>{
                    dispatch({type:"manage/save",payload:{view:true,record:record}});
                }}>修改</a>
            </div>,
        },
    ];
    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...manage} loading={loading.global}/>
            <Table
                columns={columns}
                rowKey={id=>id.id}
                pagination={false}
                loading={loading.global}
                size="small"
                dataSource={manage.getManageData || null} />
            <Pagination current={manage.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={manage.total}
                onChange={pages => { !loading.global && dispatch({type:'manage/save',payload:{pages:pages}});}}/>
        </div>
    );
};


class PagesGET extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            addressid:'',
            type:'',
            time:['',''],
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"manage/getManage",payload:{
            category:'',
            department_id:'',
            start_time:'',
            end_time:'',
            pageNumber :1,
            pageSize :10,
        }});
        this.props.dispatch({type:"manage/getAllbumen"});
    }
    renderTreeNodesTow = data => data.map((item) => {
        if (item.children) {
            return (
                <TreeSelect.TreeNode title={item.s_name} value={item.id} key={item.id}>
                    {this.renderTreeNodesTow(item.children)}
                </TreeSelect.TreeNode>
            );
        }
        return item.type != 3 && <TreeSelect.TreeNode title={item.s_name} key={item.id} value={item.id} />;
    });
    render (){

        let { pages,record,view ,dispatch ,loading,FZR,ZRBM} = this.props;
        let {time,addressid,type} = this.state;
        ZRBM = arrayToTree(ZRBM?ZRBM:[].filter(_ => _.mpid !== '-1'), 'id', 'f_id');

        return (
            <div className={styles.containerit}>
                <Button style={{margin:'10px 0px 0 10px' }} type="primary" onClick={()=>{
                    dispatch({type:'manage/save',payload:{view:true}});
                    this.setState({
                        category: '',
                        department_id:'',
                        disaster_form:'',
                        scope:'',
                        sup_department:'',
                        user_id:'',
                    });
                }}>+新增隐患统计</Button>
                <br/>
                <TreeSelect
                    // showSearch
                    style={{ width: 300 ,marginBottom: 10, marginTop: -4}}
                    value={this.state.addressid || undefined}
                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                    placeholder="责任部门"
                    allowClear
                    treeDefaultExpandAll
                    onChange={(TreeSelectValue)=>{
                        this.setState({
                            addressid:TreeSelectValue,
                        });
                    }}
                >
                    <TreeSelect.TreeNode title='全部' key="" value='' />
                    {this.renderTreeNodesTow(ZRBM)}
                </TreeSelect>
                <Select placeholder="类别" value={type || undefined} style={{ width: 200,margin:10 }} onChange={(value)=>{
                    this.setState({type :value});
                }}>
                    <Option value="">全部</Option>
                    <Option value="1">自然灾害</Option>
                    <Option value="2">事故灾难</Option>
                    <Option value="3">公共卫生</Option>
                    <Option value="4">社会安全</Option>
                </Select>
                <span style={{margin:10 }}>日期范围:</span>
                <RangePicker value={time[0]?[moment(time[0], dateFormat), moment(time[1], dateFormat)]:[]}
                    onChange={(date, dateString)=>{
                        this.setState({
                            time:dateString,
                        });
                    }} />
                <div style={{float:"right"}}>
                    <Button style={{marginLeft:10,zIndex:9999}} type='primary' onClick={()=>{
                        let {addressid,type,time} = this.state;
                        this.props.dispatch({type:"manage/getManage",payload:{
                            category:type,
                            department_id:addressid,
                            start_time:time[0],
                            end_time:time[1],
                            pageNumber :pages,
                            pageSize :10,
                        }});
                    }}>查询</Button>
                    <Button style={{margin:10,zIndex:9999}} onClick={()=>{
                        this.setState({
                            time:[],
                            type:'',
                            addressid:'',
                        });
                    }}>重置</Button>
                </div>
                <Modal
                    title={record.id?"修改威胁隐患统计":"添加威胁隐患统计"}
                    visible={view}
                    confirmLoading={loading}
                    onOk={()=>{
                        let {category,department_id,disaster_form,scope,sup_department,user_id} = this.state;
                        if(category && department_id && disaster_form && scope && sup_department && user_id){
                            let body ={
                                category: category,
                                department_id:department_id,
                                disaster_form:disaster_form,
                                scope:scope,
                                sup_department:sup_department,
                                user_id:user_id,
                            };
                            if(record.id){
                                body.id = record.id;
                            }
                            dispatch({type:record.id?"manage/putManage":"manage/postManage",payload:body});
                        }else{
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={()=>{
                        dispatch({type:"manage/save",payload:{view:false,record:{}}});
                    }}>
                    <Row style={{marginLeft:50}}>
                        <Col span={24}>
                            <span><span style={{color:'red'}}>*</span>隐患名称:</span>
                            <Input style={{width: 300, marginTop: -4,marginLeft:10}}
                                onChange={e => this.setState({nameIt: e.target.value})}
                                value={this.state.nameIt}
                                placeholder="名称"/>
                        </Col>
                        <Col span={24}>
                            <span><span style={{color:'red'}}>*</span>安全隐患:</span>
                            <Select value={this.state.category || undefined} placeholder="安全隐患类别" style={{ width: 300,margin:10 }} onChange={(value)=>{
                                this.setState({category :value});
                            }}>
                                <Option value="1">自然灾害</Option>
                                <Option value="2">事故灾难</Option>
                                <Option value="3">公共卫生</Option>
                                <Option value="4">社会安全</Option>
                            </Select>
                        </Col>
                        <Col span={24}>
                            <span><span style={{color:'red'}}>*</span>负责部门:</span>
                            <TreeSelect
                                // showSearch
                                style={{ width: 300 ,marginBottom: 10, marginTop: -4,marginLeft:10}}
                                value={this.state.department_id}
                                dropdownStyle={{ maxHeight: 300, overflow: 'auto' }}
                                placeholder="责任部门"
                                allowClear
                                treeDefaultExpandAll
                                onChange={(TreeSelectValue)=>{
                                    this.setState({
                                        department_id:TreeSelectValue,
                                    });
                                }}
                            >
                                {this.renderTreeNodesTow(ZRBM)}
                            </TreeSelect>
                            {/*<Select value={this.state.department_id || undefined} placeholder="责任部门" style={{width: 300, marginBottom: 10, marginTop: -4,marginLeft:10}} onChange={(value)=>{*/}
                            {/*this.setState({department_id :value});*/}
                            {/*}}>*/}
                            {/*{*/}
                            {/*ZRBM && ZRBM.map(item =>{*/}
                            {/*return <Option key={item.id} value={item.id}>{item.plan_department}</Option>;*/}
                            {/*})*/}
                            {/*}*/}
                            {/*</Select>*/}
                        </Col>
                        <Col span={24}>
                            <span><span style={{color:'red'}}>*</span>灾害形式:</span>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4,marginLeft:10}}
                                onChange={e => this.setState({disaster_form: e.target.value})}
                                value={this.state.disaster_form}
                                placeholder="可能灾害形式"/>
                        </Col>
                        <Col span={24}>
                            <span><span style={{color:'red'}}>*</span>影响范围:</span>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4,marginLeft:10}}
                                onChange={e => this.setState({scope: e.target.value})}
                                value={this.state.scope}
                                placeholder="影响范围"/>
                        </Col>
                        <Col span={24}>
                            <span><span style={{color:'red'}}>*</span>上级部门:</span>
                            <TreeSelect
                                // showSearch
                                style={{ width: 300 ,marginBottom: 10, marginTop: -4,marginLeft:10}}
                                value={this.state.sup_department}
                                dropdownStyle={{ maxHeight:260, overflow: 'auto' }}
                                placeholder="上级部门"
                                allowClear
                                treeDefaultExpandAll
                                onChange={(TreeSelectValue)=>{
                                    this.setState({
                                        sup_department:TreeSelectValue,
                                    });
                                }}
                            >
                                {this.renderTreeNodesTow(ZRBM)}
                            </TreeSelect>
                            {/*<Select value={this.state.sup_department || undefined} placeholder="上级部门" style={{width: 300, marginBottom: 10, marginTop: -4,marginLeft:10}} onChange={(value)=>{*/}
                            {/*this.setState({sup_department :value});*/}
                            {/*}}>*/}
                            {/*{*/}
                            {/*ZRBM && ZRBM.map(item =>{*/}
                            {/*return <Option key={item.id} value={item.id}>{item.plan_department}</Option>;*/}
                            {/*})*/}
                            {/*}*/}
                            {/*</Select>*/}
                        </Col>
                        <Col span={24}>
                            <span><span style={{color:'red'}}>*</span>负责人员:</span>
                            <Select value={this.state.user_id || undefined} placeholder="负责人" style={{width: 300, marginBottom: 10, marginTop: -4,marginLeft:10}}
                                // mode="multiple"
                                onChange={value=>{
                                    this.setState({
                                        user_id:value,
                                    });
                                }}>
                                {FZR && FZR.map(item =>{
                                    return <Option key={item.id} value={item.id}>{item.name}</Option>;
                                })}
                            </Select>
                        </Col>
                    </Row>
                </Modal>
            </div>
        );
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.record.id !== this.props.record.id) {
            let {category,department_id,disaster_form,scope,sup_department,user_id} = nextProps.record;
            this.setState({
                category: category,
                department_id:department_id,
                disaster_form:disaster_form,
                scope:scope,
                sup_department:sup_department,
                user_id:user_id,
            });
        }
        if(nextProps.pages !== this.props.pages){
            if(nextProps.pages == 1 && this.props.pages == 0){return;}
            let {addressid,type,time} = this.state;
            this.props.dispatch({type:"manage/getManage",payload:{
                category:addressid,
                department_id:type,
                start_time:time[0],
                end_time:time[1],
                pageNumber :nextProps.pages == 0?1:nextProps.pages,
                pageSize :10,
            }});
        }
    }
}
export default connect(({ manage, loading }) => ({ manage, loading }))(Pages);
